import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface WeatherData {
  forecastTime?: string;
  currentTime?: string;
  weatherType?: string;
  weatherIcon?: string;
  temperature?: string;
  feelsLike?: string;
  humidity?: string;
  pressure?: string;
  windDirection?: string;
  windLevel?: string;
}

export interface WeatherForecastProps {
  width?: string | number;
  height?: string | number;
  weatherData?: WeatherData;
  showGradientText?: boolean;
  iconSize?: {
    width?: number;
    height?: number;
  };
  textColors?: {
    time?: string;
    label?: string;
    value?: string;
    weather?: string;
  };
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  onWeatherIconClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const WeatherForecast = forwardRef<HTMLDivElement, WeatherForecastProps>((props, ref) => {
  const {
    width = 448,
    height = 80,
    weatherData = {
      forecastTime: '11日13时预报:',
      currentTime: '当时实况(13:45):',
      weatherType: '大雨',
      weatherIcon: 'http://localhost:8085/static/images/qixiangfangzhai/yu.png',
      temperature: '20.8℃',
      feelsLike: '20.7℃',
      humidity: '98%',
      pressure: '1012hpa',
      windDirection: '东北偏东风',
      windLevel: '1级'
    },
    showGradientText = true,
    iconSize = {
      width: 46,
      height: 46
    },
    textColors = {
      time: 'rgba(255,255,255,0.6)',
      label: 'rgba(255,255,255,0.8)',
      value: '#1AD7FF',
      weather: '#FFFFFF'
    },
    theme = 'dark',
    style = {},
    className = '',
    onClick,
    onWeatherIconClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  };

  const handleWeatherIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (onWeatherIconClick) {
      onWeatherIconClick();
    }
  };

  const getGradientStyle = (text: string) => {
    if (!showGradientText) return {};
    return {
      background: 'linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 3%, #81C6FF 100%)',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text'
    };
  };

  const weatherForecastClassName = ['weather-forecast', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={weatherForecastClassName}
      style={componentStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 左侧 */}
      <div className="left-wrap">
        {/* 图标 */}
        <div
          className="forecast-time"
          style={{ color: textColors.time }}
        >
          {weatherData.forecastTime}
        </div>
        {/* 天气类型 */}
        <div className="weather-section">
          <div
            className="weather-icon"
            style={{
              width: `${iconSize.width}px`,
              height: `${iconSize.height}px`,
              backgroundImage: weatherData.weatherIcon ? `url(${weatherData.weatherIcon})` : undefined
            }}
            onClick={handleWeatherIconClick}
          />
          <div
            className="weather-type"
            style={{
              color: textColors.weather,
              ...(showGradientText ? getGradientStyle(weatherData.weatherType || '') : {})
            }}
          >
            {weatherData.weatherType}
          </div>
        </div>
      </div>

      {/* 右侧 */}
      <div className="right-wrap">
        {/* 实况 */}
        <div
          className="forecast-time"
          style={{ color: textColors.time }}
        >
          {weatherData.currentTime}
        </div>
        {/* 信息区 */}
        <div className="temperature-section">
          <div className="section-item t-width">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              温度
            </span>
            <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.temperature || '') : {})
              }}>{weatherData.temperature}</span>
            </div>
          </div>
          <div className="section-item width-90">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              体感温度
            </span>
            <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.feelsLike || '') : {})
              }}>{weatherData.feelsLike}</span>
            </div>
          </div>
          <div className="section-item width-60">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              湿度
            </span>
            <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.humidity || '') : {})
              }}>{weatherData.humidity}</span>
            </div>
          </div>
          <div className="section-item t-width">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              气压
            </span>
            <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.pressure || '') : {})
              }}>{weatherData.pressure}</span>
            </div>
          </div>
          <div className="section-item width-90">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              风向
            </span>
            <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.windDirection || '') : {})
              }}>{weatherData.windDirection}</span>
            </div>
          </div>
          <div className="section-item width-60">
            <span
              className="temp-label"
              style={{ color: textColors.label }}
            >
              风力
            </span>
            <div className="temp-value">
              <span style={{
                color: textColors.value,
                ...(showGradientText ? getGradientStyle(weatherData.windLevel || '') : {})
              }}>{weatherData.windLevel}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});

WeatherForecast.displayName = 'WeatherForecast';

export default WeatherForecast;
